import './App.scss';
import "bootstrap/dist/css/bootstrap.min.css"
import InputSearch from "./components/InputSearch"
import FileList from "./components/FileList"
import BottomBtn from "./components/BottomBtn";
import file from "./components/FileList/file";
import React from "react";

import {faPlus, faFileImport} from "@fortawesome/free-solid-svg-icons"

function App() {
    let files = file;

    function changeFileTitle(id, value) {
        files = files.map(item => {
            if (id === item.id) {
                item.title = value;
            }
            return item;
        })
    }

    return (
        <div className="App">
            <div className="row">
                <div className="col-4 left-pannel">
                    <InputSearch title='c.Hope.N' onFileSearch={(value) => console.log(value)}/>
                    <FileList fileList={files} saveEditFile={(value, id) => {
                        changeFileTitle(id, value)
                    }}/>
                    <div className='d-flex'>
                        <BottomBtn icon={faPlus} colorClass='primary' text='新建' onBtnClick={() => console.log('新建')}/>
                        <BottomBtn icon={faFileImport} colorClass='success' text='导入'
                                   onBtnClick={() => console.log('导入')}/>
                    </div>
                </div>
                <div className="col-8 right-pannel">
                </div>
            </div>
        </div>
    );
}

export default App;
